<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <script type="text/javascript" src=".././static/js/public-head.js"></script>

    <script>
        $(function() {

        })
    </script>
</head>

<body >

<table class="layui-table" id="func-add-opt-tab" lay-filter="func-add-opt-tab">

</table>

</body>
</html>

<script>
    var token = localStorage.getItem("token")
   layui.use("table",function(){
       var table = layui.table;
       var layer = layui.layer;
       var form = layui.form;
       table.render({
           id:"func-add-opt-tab",
           elem: '#func-add-opt-tab'
           ,url:basePath+'/function/listFuncOperate'+self.location.search
           ,where:{token:token }
           ,cellMinWidth: 50 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
           ,page: false
           ,cols: [[
                {field:'OPERATE_ID', width: 50,  title: 'NO.'}
               ,{field:'STYLE',   title: '按钮' ,templet:function(d){
                   var dom = '<button class="layui-btn '+ d.STYLE+'">'+ "<i class='layui-icon "+ d.ICON +"'></i>"+d.OPERATE_NAME+'</button>'
                   //console.log(dom)
                   return dom
               }},
               {field:'ACTION',  title: '执行动作', edit: 'text'},
               {field:'STATE', title: '启用',width:80,templet :"#func-add-opt-state", unresize: true}
           ]]
       });

       //监听单元格编辑
       table.on('edit(func-add-opt-tab)', function(obj){
           var value = obj.value //得到修改后的值
                   ,data = obj.data //得到所在行所有键值
                   ,field = obj.field; //得到字段
           //console.log(data)
           var param = {
               functionId:data.FUNCTION_ID,
               operateId:data.OPERATE_ID,
               token:token,
               actions:data.ACTION,
               state:data.STATE
           }

           $.post(basePath+"/function/updateFuncOperate",param,function(res){
                if(res.code != 0){
                    layer.msg(res.msg)
                }
               table.render("func-add-opt-tab")
           },"json")
       });

       form.on('switch(filter-func-state)', function(obj){
           var state = obj.elem.checked?1:0;
           var actions = $(obj.elem).attr("_action");
           var funcId = $(obj.elem).attr("_funcId");
           var optId = $(obj.elem).attr("_optId");

           $.post(basePath+"/function/updateFuncOperate",{
               state :state,actions:actions,functionId:funcId,operateId:optId,token:token
           },function(res){
               if(res.code != 0){
                   layer.msg(res.msg)
                   obj.elem.checked = !state
               }
               table.render("func-add-opt-tab")
           },"json")
       })

   })
</script>


<script type="text/html" id="func-add-opt-state">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="state"  _funcId="{{d.FUNCTION_ID}}" _optId="{{d.OPERATE_ID}}" _action="{{d.ACTION?d.ACTION:''}}"  _id="{{d.id}}"  value="{{d.STATE}}" lay-skin="switch" lay-text="是|否" lay-filter="filter-func-state" {{ d.STATE == 1 ? 'checked' : '' }}>
</script>